import canEditTable from '../Components/canEditTable.vue'
import headerImgUploader from '../Components/headerImgUploader.vue'
import validate from '../../libs/validate';

export default {
	// name:'author-ctrl-index',
	components: {
		canEditTable,
		headerImgUploader
	},
	computed: {
		user() {
			return this.$store.state.user.data
		}
	},
	data() {
		return {
			tableHeader: [{
					title: '序号',
					type: 'index',
					width: 80,
					align: 'center'
				},
				{
					title: '头像',
					width: 100,
					key: 'icon_url',
					isImg: true,
					align: 'center'
				},
				{
					title: '姓名',
					align: 'center',
					key: 'name',
					editable: true
				},
				{
					title: '拼音',
					align: 'center',
					key: 'name_code',
					editable: true
				},
				{
					title: '操作',
					align: 'center',
					key: 'handle',
					handle: ['action', 'delete']
				}
			],
			authorFormRule: {
				name: [{
					required: true,
					validator: validate.name,
					trigger: "blur"
				}],
				name_code: [{
					required: true,
					validator: validate.enOnly,
					trigger: "blur"
				}],
			},
			authorList: [],
			showAddModal: false,
			modalLoading: true,
			authorForm: {
				name: '',
				name_code: '',
				intro: ''
			},
			imgUploadPath: "",
			uploadImgdata: {},
			anthorHeaderPath: "",
			pageNum: 1,
			pageCount: 0,
			pageLoading: false,
			searchKey: '',
			selectAuthor: ''
		}
	},
	methods: {
		handleChangeAuthor(val, index) {
			console.log(val, index);

		},
		showModal() {
			this.showAddModal = true;
		},
		changeLoadingStatus(type) {
			if (!type) {
				this.modalLoading = false;
			}
			this.$nextTick(() => {
				this.modalLoading = true;
			});
		},
		ok() {
			if (!this.anthorHeaderPath) {
				this.$Notice.error({
					title: "请先上传图片后再操作"
				});
				this.changeLoadingStatus(false);
				return;
			}
			this.$refs.authorForm.validate(valid => {
				if (valid) {
					if (this.authorForm.uuid) {
						this.doChangeAuthor()
						return
					}
					this.doAddAuthor()
				} else {
					this.changeLoadingStatus(false)
				}
			})
		},
		cancel() {

		},
		doAddAuthor() {
			this.changeLoadingStatus(true)
			this.http.post(this.postUrl.doAddAuthor, {
				token: this.user.tokenList[0],
				icon_url: this.anthorHeaderPath,
				name: this.authorForm.name,
				name_code: this.authorForm.name_code,
				intro: this.authorForm.intro
			}).then((data) => {
				console.log(data);
				if (data.code > -1) {
					this.showAddModal = false;
					this.authorForm = {
						name: '',
						name_code: '',
						intro: ''
					}
					this.$Notice.success({
						title: '添加成功！',
					})
					this.getAuthorList();

				} else {
					this.errorHandle(data.msg)
				}
				this.changeLoadingStatus(false)
			}, () => {
				this.changeLoadingStatus(false)
				this.errorHandle()
			})
		},
		doChangeAuthor() {
			this.changeLoadingStatus(true)

			this.http.post(this.postUrl.doChangeAuthorInfo, {
				token: this.user.tokenList[0],
				composer_uuid: this.authorForm.uuid,
				icon_url: this.anthorHeaderPath,
				name: this.authorForm.name,
				name_code: this.authorForm.name_code,
				intro: this.authorForm.intro
			}).then((data) => {
				if (data.code > -1) {
					this.authorList[this.authorForm.index].name = this.authorForm.name;
					this.authorList[this.authorForm.index].name_code = this.authorForm.name_code;
					this.authorList[this.authorForm.index].intro = this.authorForm.intro;
					this.authorList[this.authorForm.index].icon_url = this.anthorHeaderPath;
					this.showAddModal = false;
					this.authorForm = {
						name: '',
						name_code: '',
						intro: ''
					}
					this.$Notice.success({
						title: '修改成功！',
					})
				} else {
					this.errorHandle(data.msg)
				}
				this.changeLoadingStatus(false)
			}, () => {
				this.changeLoadingStatus(false)
				this.errorHandle()
			})

		},
		uploadSuccess(data) {
			console.log(data);
			this.anthorHeaderPath = data;
		},
		deleteAuthor(val, index) {
			let oldValue = val[index];
			this.http.post(this.postUrl.doDeleteAuthor, {
				token: this.user.tokenList[0],
				composer_uuid: val[index].uuid
			}).then((data) => {
				if (data.code >= 0) {
					this.$Notice.success({
						title: '删除成功！',
					});
					this.getAuthorList();
				} else {
					this.errorHandle(data.msg)
					this.authorList.splice(index, 0, oldValue)
				}
			}, () => {
				this.errorHandle()
			})
		},
		clickAction(data, index) {
			this.anthorHeaderPath = data.icon_url;
			data.index = index;
			this.authorForm = data;
			this.showModal()
		},
		clearSearch() {
			this.searchKey = '';
			this.pageNum = 1;
			this.getAuthorList();

		},
		doSearch() {
			this.pageNum = 1;
			this.getAuthorList();
		},
		getAuthorList() {
			if (this.pageLoading) return
			this.pageLoading = true;
			this.http.post(this.postUrl.getAuthorList, {
				token: this.user.tokenList[0],
				pageNum: this.pageNum,
				pageSize: 20,
				key_word: this.searchKey
			}).then((data) => {
				console.log(data);

				if (data.code > -1) {
					this.$nextTick(() => {
						this.pageCount = data.data.data_count;
					})
					this.authorList = JSON.parse(JSON.stringify(data.data.data_list))
				} else {
					this.errorHandle(data.msg)
				}
				this.pageLoading = false;
			}, () => {
				this.pageLoading = false;
				this.errorHandle()
			})
		},
		/**
		 * 改变页面
		 *
		 * @param {any} num
		 */
		changePage(num) {
			console.log(num);
			this.pageNum = num;
			this.getAuthorList()
			document.querySelector('.single-page-con').scrollTo(0, 0)
		}
	},
	mounted() {
		this.imgUploadPath = this.postUrl.uploadAuthorHeader;
		setTimeout(() => {
			let body = {
				token: this.user.tokenList[0],
				app_key: this.http.app_key,
				timestamp: "2017-09-26 15:52:28"
			};
			let sign = this.http.getSign({
				token: this.user.tokenList[0]
			});
			body.sign = sign;
			this.uploadImgdata = body;
			this.getAuthorList()
		}, 200);
	},
	// watch: {
	//     user(val) {
	//         if (val) {

	//         }
	//     }
	// }
}
